<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02DOM练习</title>
</head>
<body>
<h1>我是标题：<span class="s"></span></h1>
<button onclick="f1()">按钮</button>
<hr>
<input type="text" id="i1">
<input type="text" id="i2">
<button onclick="f2()">按钮</button>


<script>
    function f1(){
        //根据类选择器找到span元素
        let spanE = document.querySelector('.s');
        //设置span元素内的显示文本
        // spanE.innerHTML = '哈哈哈';
        // spanE.innerHTML = '哈<mark>哈</mark>哈';
        spanE.innerHTML = '<table border="1px"><tr><td>姓名</td><td>年龄</td><td>性别</td></tr></table>';

    }

    function f2(){
        let input1 = document.querySelector('#i1'); //根据id选择器获取元素
        let input2 = document.getElementById('i2'); //根据id值获取元素
        console.log(typeof input1.value); //从输入框中获取的内容是string类型
        console.log(input1.value+input2.value);
        let i1 = parseFloat(input1.value); //类型转换
        console.log(i1,typeof i1); //'number'

    }
</script>

</body>
</html>